<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title>animation</title>
    <link rel="stylesheet" href="@@CONTEXT_PATH/css/animation-fill-mode.css"/>
</head>
<body>
<h1 class="tc">animation-fill-mode属性值demo</h1>
<div class="auto pct80 pt20 pb20">
    <div id="demo1" class="demo_box">
        <h2 class="tc">demo1<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_2"></div>
            <div class="target target_3"></div>
        </div>
    </div>
    <div id="demo2" class="demo_box">
        <h2 class="tc">demo2<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_2"></div>
            <div class="target target_3"></div>
        </div>
    </div>
    <div id="demo3" class="demo_box">
        <h2 class="tc">demo3<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_2"></div>
            <div class="target target_3"></div>
            <div class="target target_4"></div>
        </div>
    </div>
    <div id="demo4" class="demo_box">
        <h2 class="tc">demo4<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_1_02"></div>
            <div class="target target_2"></div>
            <div class="target target_2_02"></div>
            <div class="target target_3"></div>
            <div class="target target_3_02"></div>
        </div>
    </div>
    <div id="demo5" class="demo_box">
        <h2 class="tc">demo5<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_2"></div>
        </div>
    </div>
    <div id="demo6" class="demo_box">
        <h2 class="tc">demo6<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_2"></div>
        </div>
    </div>
    <div id="demo7" class="demo_box">
        <h2 class="tc">demo7<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_2"></div>
        </div>
    </div>
    <div id="demo8" class="demo_box">
        <h2 class="tc">demo8<button type="button" class="btn-animate-add">添加动画</button><button type="button" class="btn-animate-cancel">撤销动画</button></h2>
        <div class="box">
            <div class="target target_1"></div>
            <div class="target target_2"></div>
        </div>
    </div>
    <br><br><br><br><br><br><br><br><br>
</div>
<script src="@@CONTEXT_PATH/js/lib/sea.js"></script>
<script src="@@CONTEXT_PATH/js/common.js"></script>
<script>
    seajs.use('app/animation-fill-mode');
</script>
</body>
</html>